<template>
  <!-- 信修案件 -->
  <section class="page credit-repair-case">
    <data-form :model="searchModel" :page="pageService" @handleResetForm="handleResetForm" @onSearch="refreshData">
      <template slot="inputs">
        <el-form-item label="订单编号" prop="caseNumber">
          <el-input v-model="searchModel.caseNumber"></el-input>
        </el-form-item>
        <el-form-item label="客户姓名" prop="personalName">
          <el-input v-model="searchModel.personalName"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="mobileNo">
          <el-input v-model="searchModel.mobileNo"></el-input>
        </el-form-item>
        <el-form-item label="身份证号" prop="idCard">
          <el-input v-model="searchModel.idCard"></el-input>
        </el-form-item>
        <el-form-item label="逾期期数" prop="overduePeriod">
          <el-select clearable placeholder="请选择" v-model="searchModel.overduePeriod">
            <el-option :key="index" :label="name" :value="code.replace(/M|\+/, '')" v-for="{index,name,code} in $dict.getDictData('OverduePeriodStatus')"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="逾期天数" prop="overdueDays">
          <number-range :isInteger="true" v-model="searchModel.overdueDays"></number-range>
        </el-form-item>
        <el-form-item label="案件标签" prop="labelName">
          <get-label-name :formModel="searchModel" v-model="searchModel.labelName"></get-label-name>
        </el-form-item>
        <el-form-item label="案件金额" prop="caseMoney">
          <number-range :isInteger="true" v-model="searchModel.caseMoney"></number-range>
        </el-form-item>
      </template>
    </data-form>
    <data-box :data="dataSet" :page="pageService" :selectionList.sync="selectionList" @onPageChange="refreshData">
      <template slot="buttons">
        <el-button @click="manualDistruibute" v-auth="1805">分案</el-button>
        <el-button @click="downRepairCaseInfos" v-auth="1806">批量下载案件</el-button>
      </template>
      <template slot="columns">
        <!--数据列区域-->
        <el-table-column :min-width="$helper.getOperateWidth(2)" label="操作">
          <template slot-scope="scope">
            <el-button @click="repairObj=scope.row,dialog.repair=true" type="text" v-auth="238">修复</el-button>
            <el-button @click="repairObj=scope.row,dialog.viewRecord=true" type="text" v-auth="239">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(5)" label="订单编号" prop="caseNumber">
          <template slot-scope="scope">
            <el-button @click="openExecutionPage(scope.row)" type="text">{{scope.row.caseNumber}}</el-button>
          </template>
        </el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(4)" label="客户姓名" prop="personalName" show-overflow-tooltip></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(5)" label="手机号" prop="mobileNo" show-overflow-tooltip></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(5)" label="身份证号" prop="idCard" show-overflow-tooltip></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(4)" label="地区" prop="area"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(4)" label="案件金额(元)" prop="caseMoney"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(5)" label="欠款金额（元）" prop="overdueAmount" show-overflow-tooltip></el-table-column>
        <el-table-column :formatter="row => $common.isNotValue(row.overduePeriod) ? '':`M${row.overduePeriod}`" :min-width="$helper.getColumnWidth(3)" label="逾期期数" prop="overduePeriod"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(6)" label="逾期天数" prop="overdueDays"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(6)" label="信修员" prop="repairCollectorRealName"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(10)" label="案件标签" prop="labelName"></el-table-column>
      </template>
    </data-box>
    <el-dialog :center="true" :visible.sync="dialog.repair" title="修复说明" width="800px">
      <repair-info-upload :id="repairObj.id" @close="dialog.repair=false,viewRepair = false" @success="refreshData" ref="repair-info"></repair-info-upload>
    </el-dialog>
    <!-- 点击分案弹窗 -->
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false" :visible.sync="dialog.distrubute" title="分案" width="800px" @open="$nextTick(()=>$refs['case-allot'].refreshDept())">
      <case-allot :fromChannel="fromChanel" @close="dialog.distrubute=false" @refreshList="refreshData" ref="case-allot"></case-allot>
    </el-dialog>
    <!--修复信息查看-->
    <el-dialog :center="true" :visible.sync="dialog.viewRecord" @open="$nextTick(() => $refs['viewRecord'].queryInfo(repairObj.id))" title="修复纪录" width="800px">
      <fix-info ref="viewRecord"></fix-info>
      <div class="operate-buttons">
        <el-button @click="dialog.viewRecord=false">关闭</el-button>
      </div>
    </el-dialog>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Dependencies, Layout, Auth } from "~/core/decorator";
import { PageService } from "~/utils/page.service";

import NumberRange from "~/components/common/number-range.vue";
import { RepairCasesService } from "~/services/domain-service/repair-cases.service";
import RepairInfoUpload from "~/components/common-manages/credit-repair-case/repair-info-upload.vue";
import RepairCaseDistrubute from "~/components/common-manages/credit-repair-case/repair-case-distrubute.vue";
import FixInfo from "~/components/collection-execution/collection-case-info/fix-info.vue";
import CaseAllot from "~/components/distribution-common/case-allot.vue";
import { CASE_CHANNEL, MENU_CHANNEL } from "~/config/enum.config";
import { namespace } from "vuex-class";
import GetLabelName from "~/components/labeling-strategy/get-label-name.vue";

const CollectionExecutionModule = namespace("collection-execution");
const AllotModule = namespace("case-allot");
@Auth(1802)
@Layout("workspace")
@Component({
  components: {
    GetLabelName,
    NumberRange,
    RepairInfoUpload,
    RepairCaseDistrubute,
    CaseAllot,
    FixInfo
  }
})
export default class CreditRepairCase extends Vue {
  @Dependencies(PageService) private pageService: PageService;
  @Dependencies(RepairCasesService)
  private repairCasesService: RepairCasesService;
  @AllotModule.Mutation
  private updateCaseIds;
  @CollectionExecutionModule.Action
  private openCollectionExecution;

  private fromChanel = MENU_CHANNEL.Letter_repair_case;
  private searchModel: any = {
    caseNumber: "",
    personalName: "",
    mobileNo: "",
    idCard: "",
    overduePeriod: "",
    overdueDays: {
      min: "",
      max: ""
    },
    caseMoney: { min: "", max: "" },
    labelName: []
  };

  private robberyCaseTrue: boolean = false;
  private repairObj: any = {};
  private dialog: any = {
    repair: false,
    distrubute: false,
    viewRecord: false
  };
  private dataSet: any[] = [];
  private selectionList: any[] = [];

  private refreshData() {
    this.repairCasesService
      .repairCasesQuery(this.searchModel, this.pageService)
      .subscribe(data => {
        this.dataSet = data;
        this.selectionList = [];
      });
  }

  private activated() {
    this.refreshData();
  }

  private mounted() {
    this.refreshData();
  }

  /**
   * 范围框输入重置
   */
  private handleResetForm() {
    this.searchModel.overdueDays = { min: "", max: "" };
  }

  /**
   * 分案
   */
  private manualDistruibute() {
    if (this.selectionList.length === 0) {
      this.$message.info("请选择要分配的案件");
      return;
    }
    this.updateCaseIds(this.selectionList.map(v => v.id));
    this.dialog.distrubute = true;
  }

  /**
   * 批量下载修复案件
   */
  private downRepairCaseInfos() {
    const params: any = {
      ...this.searchModel
    };
    if (this.selectionList.length !== 0) {
      params.caseIds = this.selectionList.map(v => v.id).join(",");
    }
    this.repairCasesService
      .downRepairCaseInfos(params)
      .subscribe(data => this.$common.downloadFile(data.url));
  }

  /**
   * 进入查看执行页
   */
  private openExecutionPage(row) {
    this.$router.openCaseDetail(row.id, {
      menuChannel: MENU_CHANNEL.Letter_repair_case,
      hiddenCaseList: true,
      hiddenAction: true
    });
  }
}
</script>

<style lang="less">
</style>
